<template>
  <div class="p-10">
    <h2 class="text-center text-lg">会员注册</h2>

    <Form @submit="onSubmit" :validation-schema="schema">
      <Field name="account" class="lj-input" placeholder="请输入手机号码或邮箱" />
      <ErrorMessage name="account" as="div" class="lj-error" />

      <Field name="password" class="lj-input mt-3" type="password" placeholder="请输入密码" />
      <ErrorMessage name="password" as="div" class="lj-error" />

      <Field name="password_confirm" class="lj-input mt-3" type="password" placeholder="请再次输入密码" />
      <ErrorMessage name="password_confirm" as="div" class="lj-error" />

      <button type="submit" class="lj-button mt-3">注册</button>
    </Form>
  </div>
</template>

<script setup lang="ts">
import v from '@/plugins/validate'

// const router = useRouter()
const { yup, Form, Field, ErrorMessage } = v

const schema = yup.object({
  account: yup.string().required().email().label('账号'),
  password: yup.string().required().min(6).label('密码'),
  password_confirm: yup.string().required().min(6).label('确认密码'),
})

const onSubmit = (values: any) => {
  // login(values)
  console.log(values)
  // router.push({ name: 'home' })
}
</script>

<style lang="scss" scoped></style>

<script lang="ts">
export default {
  route: { name: 'register' },
}
</script>
